<template>
  <div class="blogsList">
    <blogItem :data="articles[pageNum]" />
    <n-pagination v-model:page="page" :page-count="articles.length" />
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onActivated } from "vue"
import { useStore } from "vuex"
import { pagingData } from "@/util/util"
import { NPagination } from "naive-ui"
import { article, pageSize } from "@/hooks/useArticles"
import blogItem from "./blogItem.vue"
import bus from "@/eventBus"
onActivated(() => {
  bus.state.title = "主页"
})
const store = useStore()
const page = ref<number>(1)
const pageNum = ref<number>(0)

const articles = computed<Array<Array<article>>>(() => {
  return pagingData(store.state.articles, pageSize)
})

watch(page, newVal => {
  window
    .$loading(() => {
      pageNum.value = newVal - 1
    }, 1000)
    .then(_ => {
      setTimeout(() => {
        document.body.style.overflow = "auto"
        // document.body.style.opacity = "0.9"
        window.scrollTo({
          top: 0,
          behavior: "smooth",
        })
      }, 500)
    })
})
</script>

<style lang="scss" scoped>
.blogsList {
  width: 100%;
  margin-top: 30px;
  text-align: center;
}
.n-pagination {
  justify-content: center;
  margin: 20px 0;
}
</style>
